    <div class="form-group">
        <label class="col-sm-2 control-label">产品名称:</label>
        <div class="col-sm-10" id="proNameBody">

        </div>
    </div>
    <div class="form-group">
        <label class="col-sm-2 control-label" >产品编号:</label>
        <div class="col-sm-10" id="proIDBody">

        </div>
    </div>

    <div class="form-group">
        <label class="col-sm-2 control-label">数量单位</label>
        <div class="col-sm-10">
            <input type="text" class="form-control" readonly="true"  id="proUnit"/>
        </div>
    </div>
    <div class="form-group">
        <label class="col-sm-2 control-label">产品数量</label>
        <div class="col-sm-10">
            <input type="text" class="form-control"  id="num" onchange="getTotal()"/>
        </div>
    </div>
    <div class="form-group">
        <label class="col-sm-2 control-label">采购单价</label>
        <div class="col-sm-10">
            <input type="text" class="form-control"  onchange="getTotal()" id="price"/>
        </div>
    </div>
    <div class="form-group">
        <label class="col-sm-2 control-label">采购总价</label>
        <div class="col-sm-10">
            <input type="text" class="form-control"   id="total"/>
        </div>
    </div>

<script type="text/html" id="proID">
    <select onchange="findID()" id="productID"  class="form-control">
        <option>产品编号</option>
        {{each data}}
        <option value="{{$value.productCode}}">{{$value.productCode}}</option>
        {{/each}}
    </select>
</script>
<script type="text/html" id="proName">
        <select onchange="findName()" id="productName"  class="form-control">
            <option>产品名称</option>
            {{each data}}
            <option value="{{$value.name}}">{{$value.name}}</option>
            {{/each}}
        </select>
</script>
<script>



    function getTotal() {
        var num =$('#num').val();
        var price =$('#price').val();
        $('#total').val(num*price);
    }



    function findID() {

        Ajax.get("/findProductID",{
            productCode:$('#productID').find("option:selected").val()
        },function (result) {
            var proName=result.data.name;
            var unitName=result.data.unitName;
            $('#proUnit').val(unitName);
            var productName = document.getElementById("productName");
            for (var i=0;i<productName.options.length;i++){
                if (productName.options[i].value==proName){
                    productName.options[i].selected=true;
                }
            }
        })
    }

    function findName() {
        Ajax.post("/findProductName", {
            name: $('#productName').find("option:selected").val()
        }, function (result) {
            var proID = result.data.productCode;
            var unitName = result.data.unitName;
            $('#proUnit').val(unitName);
            var productID = document.getElementById("productID");
            for (var i = 0; i < productID.options.length; i++) {
                if (productID.options[i].value==proID) {
                    productID.options[i].selected = true;
                }
            }
        })
    }
</script>